<template>
	<view class="u-page">
		<!-- <u-navbar title="核销" fixed :autoBack="true" >
		</u-navbar> -->
		<view class="writeOff-page">
			<view class="stk">
				<u-sticky>
					<u-subsection :list="list" :current="current" :fontSize="14" @change="handleChange"></u-subsection>
				</u-sticky>
			</view>
			<view class="search-price">
				<ul>
					<li>
						<span>认款金额:</span>
						<u--input disabled v-model="subAmount" color='red' fontSize="14" type="digit" border="surround">
						</u--input>
					</li>
					<li>
						<span>核销金额:</span>
						<u--input disabled v-model="writeAmount" color='red' fontSize="14" type="digit"
							border="surround">
						</u--input>
					</li>
					<li>
						<span>剩余金额:</span>
						<u--input disabled v-model="remainAmount" color='red' fontSize="14" type="digit"
							border="surround">
						</u--input>
					</li>
				</ul>
			</view>
			<view class="hexiao" v-show="current == 0">
				<keep-alive>
					<div class="panels">
						<u-radio-group @change="handleChangeRadio" v-model="radiovalue1">
							<div class="panel" v-for="item in dtReport1" :key="item.HNYY_SALE_GATHERING_BILL_ID">
								<u-radio size="24" shape="circle" :name="item.HNYY_SALE_GATHERING_BILL_ID"></u-radio>
								<view class="content">
									<div class="col">
										<span>单据ID：</span>
										<span>{{item.HNYY_SALE_GATHERING_BILL_ID}}</span>
									</div>
									<div class="col">
										<span>认款单号：</span>
										<span>{{item.HNYY_SALE_GATHERING_BILL_NO}}</span>
									</div>
									<div class="col">
										<span>客户代码：</span>
										<span>{{item.CLIENT_CODE}}</span>
									</div>
									<div class="col">
										<span>客户名称：</span>
										<span>{{item.CLIENT_NAME}}</span>
									</div>
									<div class="col">
										<span>日期：</span>
										<span>{{item.IMP_DATE | filterTimes}}</span>
									</div>
									<div class="col">
										<span>未认款金额：</span>
										<span>{{item.CAN_HX_AMOUNT}}</span>
									</div>
									<div class="col">
										<span>认款金额：</span>
										<span>{{item.AMOUNT}}</span>
									</div>
									<div class="col">
										<span>已认款金额：</span>
										<span>{{item.EXEC_HX_AMOUNT}}</span>
									</div>
									<div class="col">
										<span>汇款账号：</span>
										<span>{{item.BANK_ACCOUNT}}</span>
									</div>
									<div class="col">
										<span>导入人：</span>
										<span>{{item.CREATER}}</span>
									</div>
									<div class="col">
										<span>导入时间：</span>
										<span>{{item.CREATE_DATE | filterTimes}}</span>
									</div>
								</view>
							</div>
						</u-radio-group>
					</div>
				</keep-alive>
			</view>
			<view class="dingdan" v-show="current == 1">
				<keep-alive>
					<div class="panels">
						<u-checkbox-group @change="handleChangeCheckbox" v-model="checkbox1">
							<div class="panel" v-for="(item,index) in dtReport" :key="item.EBS_INVOICE_NO">
								<u-checkbox size="24" :name="index" @change="handleChangeCheck"></u-checkbox>
								<view class="content">
									<div class="col">
										<span>EBS发票号码：</span>
										<!-- 1 -->
										<span>{{item.EBS_INVOICE_NO}}</span>
									</div>
									<div class="col">
										<span>发票号码：</span>
										<!-- 2 -->
										<span>{{item.ERP_INVOICE_NO}}</span>
									</div>
									<div class="col">
										<span>待核总金额：</span>
										<!-- 3 -->
										<span>{{item.SUM_PAY_AMOUNT}}</span>
									</div>
									<div class="col">
										<span>订单NO：</span>
										<!-- 4 -->
										<span>{{item.ORDER_NO}}</span>
									</div>
									<div class="col">
										<span>记账日期：</span>
										<!-- 5 -->
										<span>{{item.GL_DATE | filterTimes}}</span>
									</div>
									<div class="col">
										<span>发票日期：</span>
										<!-- 6 -->
										<span>{{item.INVOICE_DATE | filterTimes}}</span>
									</div>
									<div class="col">
										<span>待核销额：</span>
										<!-- 7 -->
										<span>{{item.PAY_AMOUNT}}</span>
									</div>
									<div class="col">
										<span>原始发票金额：</span>
										<!-- 8 -->
										<span>{{item.ORIGINAL_AMOUT}}</span>
									</div>
									<div class="col">
										<span>开单日期：</span>
										<!-- 9 -->
										<span>{{item.MAKE_DATE | filterTimes}}</span>
									</div>
									<div class="col">
										<span>已勾兑：</span>
										<!-- 10 -->
										<span>{{item.EXEC_HX_AMOUNT}}</span>
									</div>
									<div class="col">
										<span>核销金额：</span>
										<span>
											<!-- 11 -->
											<u--input fontSize="12" v-model="item.HX_AMOUNT" border="bottom"
												@blur="handleChangeItemPrice($event,item.HX_AMOUNT,index)" type="digit"
												placeholder="请输入内容">
											</u--input>
										</span>
									</div>
									<div class="col">
										<span>商品信息：</span>
										<!-- 12 -->
										<span>{{item.GOODS_INFO}}</span>
									</div>
									<div class="col">
										<span>数量：</span>
										<!-- 13 -->
										<span>{{item.QTY}}</span>
									</div>
									<div class="col">
										<span>销售部门：</span>
										<!-- 15 -->
										<span>{{model1.userInfo.SaleOrg_name | filterOrgName}}</span>
									</div>

									<div class="col">
										<span>下载人：</span>
										<!-- 18 -->
										<span>{{item.CREATER_NAME}}</span>
									</div>
								</view>
							</div>
						</u-checkbox-group>
					</div>
				</keep-alive>
			</view>
			<view class="tool-page" v-if="dtReport.length">
				<view class="remark">
					<span>备注：</span>
					<u--input placeholder="请输入备注" v-model="memo" border="surround"></u--input>
				</view>
				<view class="page">
					<span>页码：</span>
					<u--input placeholder="页码" v-model="page.size" fontSize="14" type="number" border="surround">
					</u--input>
					<view class="search-btn" @click="handleDownload">列表</view>
				</view>
			</view>
			<uni-pagination @change="handleChangePage" v-if="page.total" title="标题文字" show-icon="true"
				:total="page.total" :current="page.current" :pageSize="page.size"></uni-pagination>
		</view>
		<view class="hexiao-btn">
			<u-button type="primary" :disabled="saveloading" text="保 存" @click="handleShowModal"></u-button>
		</view>
		<!-- 悬浮搜索 -->
		<view class="fixed-search" @click="handleRightClick">
			<u-icon name="search" color="#fff" size="28"></u-icon>
		</view>
		<!-- 搜索弹窗 -->
		<u-popup :show="show" closeable @close="handleClose" @open="handleOpen" mode="right">
			<view class="popup-card">
				<u--form labelPosition="top" :model="model1" :rules="rules" ref="form1">
					<u-form-item label="客户编码" prop="userInfo.ClientCode" borderBottom ref="ClientCode"
						@click="showKh = true;hideKeyboard()">
						<u--input v-model="model1.userInfo.ClientCode" placeholder="请点击选择..." disabled
							disabledColor="#ffffff" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="客户ID" prop="userInfo.ClientId" borderBottom ref="ClientId"
						@click="showKh = true;hideKeyboard()">
						<u--input v-model="model1.userInfo.ClientId" placeholder="请点击选择..." disabled
							disabledColor="#ffffff" border="none"></u--input>
					</u-form-item>
					<u-form-item label="客户名称" prop="userInfo.ClientName" borderBottom ref="ClientId"
						@click="showKh = true;hideKeyboard()">
						<u--input v-model="model1.userInfo.ClientName" placeholder="请点击选择..." disabled
							disabledColor="#ffffff" border="none"></u--input>
					</u-form-item>
					<u-form-item label="产品编码" prop="userInfo.goodsCode" borderBottom ref="goodsCode">
						<u--input v-model="model1.userInfo.goodsCode" placeholder="请输入..." border="none"></u--input>
					</u-form-item>
					<u-form-item label="发票号码" prop="userInfo.purNo" borderBottom ref="purNo">
						<u--input v-model="model1.userInfo.purNo" placeholder="请输入..." border="none"></u--input>
					</u-form-item>
					<u-form-item label="销售部门" prop="userInfo.SaleOrg_name" borderBottom ref="SaleOrg_name"
						@click="showDepartment = true; hideKeyboard()">
						<u--input v-model="model1.userInfo.SaleOrg_name" placeholder="请点击选择..." disabled
							disabledColor="#ffffff" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="发票开始日期" prop="userInfo.StartDate" borderBottom ref="item1"
						@click="showStartDate = true; hideKeyboard()">
						<u--input v-model="model1.userInfo.StartDate" placeholder="请点击选择..." disabled
							disabledColor="#ffffff" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="发票结束日期" prop="userInfo.EndDate" borderBottom ref="item1"
						@click="showDate = true; hideKeyboard()">
						<u--input v-model="model1.userInfo.EndDate" placeholder="请点击选择..." disabled
							disabledColor="#ffffff" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="排序方式" prop="userInfo.px_name" borderBottom ref="px_name"
						@click="showPaixu = true;hideKeyboard()">
						<u--input v-model="model1.userInfo.px_name" placeholder="请点击选择..." disabled
							disabledColor="#ffffff" border="none"></u--input>
					</u-form-item>
				</u--form>
				<view class="btn-group">
					<u-button :plain="true" text="重置" size="small" :hairline="true" @click="handleReset"></u-button>
					<u-button type="primary" text="下载" size="small" :disabled="loading" @click="handleDownload">
					</u-button>
				</view>
			</view>
			<!-- 部门 -->
			<u-picker title="销售部门" :show="showDepartment" ref="uPicker" :columns="saleList" keyName="SALE_ORG_NAME"
				@close="handleCancelDepartment" @cancel="handleCancelDepartment" @change="changeHandler"
				@confirm="handleConfirmDepartment"></u-picker>
			<!-- 日期 -->
			<u-datetime-picker title="发票开始日期" :show="showStartDate" :value="Startdate" mode="date" closeOnClickOverlay
				@cancel="handleCancelDates" ref="datetimePicker" @close="handleCancelDates" @confirm="handleConfirms">
			</u-datetime-picker>
			<u-datetime-picker title="发票结束日期" :show="showDate" :value="date" mode="date" closeOnClickOverlay
				@cancel="handleCancelDate" ref="datetimePicker" @close="handleCancelDate" @confirm="handleConfirm">
			</u-datetime-picker>
			<!-- 排序 -->
			<u-picker title="排序" :show="showPaixu" ref="uPicker-p" :columns="paixuList" keyName="label"
				@close="handleCancelPx" @confirm="handleConfirmPx" @change="handleChangePx" :defaultIndex='defaultIndex'
				@cancel="handleCancelPx"></u-picker>
			<u-popup :show="showKh" mode="center" :round="10" closeable @close="handleCloseKh">
				<view class="kh-card">
					<div class="search">
						<u-search placeholder="请输入..." :showAction="false" v-model="keyword" @search="handleSearchKh">
						</u-search>
					</div>
					<div class="cards">
						<div class="card" v-for="item in khList" :key="item.COM_PARTY_ID" @click="handleClickKh(item)">
							<div>客户ID：{{item.COM_PARTY_ID}}</div>
							<div>客户名称：{{item.PARTY_NAME}}</div>
							<div>客户代码：{{item.PARTY_OPCODE}}</div>
							<div>拼音：{{item.SPELL}}</div>
						</div>
					</div>
				</view>
			</u-popup>
		</u-popup>
		<!-- 客户搜索弹窗 -->

		<u-modal :show="showModal" showCancelButton :title="title" @cancel="showModal = false"
			@close="showModal = false" :content='content' @confirm="handleHx"></u-modal>
	</view>
</template>

<script>
	import store from "@/store";
	import dayjs from "dayjs"
	import _ from "lodash"
	import {
		getSaleDepartment,
		searchKh,
		downloadHx,
		writeOff
	} from "@/api";
	import Big from "big.js"
	export default {
		filters: {
			filterTimes(val) {
				if (val) {
					return dayjs(val).format("YYYY-MM-DD")
				} else {
					return val
				}
			},
			filterOrgName(val) {
				if (val) {
					return val.substr(0, 3)
				} else {
					return ''
				}
			}
		},
		data() {
			return {
				isChecked: false,
				subAmount: Number(0).toFixed(2),
				writeAmount: Number(0).toFixed(2),
				radiovalue1: "",
				checkbox1: [],
				showModal: false,
				title: "提示",
				content: "是否确认提交?",
				memo: "",
				page: {
					current: 1,
					size: 10,
					total: 0
				},
				saveloading: false,
				loading: false,
				showStartDate: false,
				defaultIndex: [0],
				khList: [],
				keyword: "",
				showKh: false,
				showPaixu: false,
				showDepartment: false,
				showDate: false,
				date: Number(new Date()),
				Startdate: Number(new Date()),
				list: ['回款', '发票'],
				current: 0,
				status_height: 44,
				show: false,
				model1: {
					userInfo: {
						SaleOrg: "",
						ClientId: "",
						ClientCode: "",
						StartDate: dayjs().subtract(1, 'year').format('YYYY-MM-DD'),
						EndDate: dayjs().format('YYYY-MM-DD'),
						goodsCode: "",
						purNo: "",
						px: "false",
						px_name: "记账日期",
						userid: "",
						pagesize: 1,
						pageindex: 10,
					},
				},
				rules: {
					'userInfo.ClientId': {
						type: 'string',
						required: true,
						message: '请选择客户',
						trigger: ['blur', 'change']
					},
				},
				paixuList: [
					[{
							label: "记账日期",
							value: "false"
						},
						{
							label: "发票日期",
							value: "trur"
						}
					]
				],
				saleList: [
					[]
				],
				dtReport: [
					// {
					// 	EBS_INVOICE_NO: "123",
					// 	ERP_INVOICE_NO: "445",
					// 	SUM_PAY_AMOUNT: 156,
					// 	ORDER_NO: 141,
					// 	GL_DATE: "2022-01-02",
					// 	INVOICE_DATE: "2021-01-07T00:00:00",
					// 	PAY_AMOUNT: 59,
					// 	ORIGINAL_AMOUT: 184,
					// 	GOODS_INFO: '/',
					// 	CLIENT_CODE: "2084",
					// 	COM_GOODS_ID: "14676",
					// 	HX_AMOUNT:12,
					// 	QTY:1,
					// 	SALE_ORG:'313',
					// 	CUSTOMER_TRX_ID:"3165151"
					// },
					// {
					// 	EBS_INVOICE_NO: "789",
					// 	ERP_INVOICE_NO: "445",
					// 	SUM_PAY_AMOUNT: 156,
					// 	ORDER_NO: 141,
					// 	GL_DATE: "2022-01-02",
					// 	INVOICE_DATE: "2021-01-07T00:00:00",
					// 	PAY_AMOUNT: 59,
					// 	ORIGINAL_AMOUT: 184,
					// 	GOODS_INFO: '/',
					// 	CLIENT_CODE: "2084",
					// 	COM_GOODS_ID: "14676",
					// 	HX_AMOUNT:12,
					// 	QTY:1,
					// 	SALE_ORG:'313',
					// 	CUSTOMER_TRX_ID:"3165151"
					// },
					// {
					// 	EBS_INVOICE_NO: "7896",
					// 	ERP_INVOICE_NO: "4454",
					// 	SUM_PAY_AMOUNT: 1562,
					// 	ORDER_NO: 1411,
					// 	GL_DATE: "2022-01-02",
					// 	INVOICE_DATE: "2021-01-07T00:00:00",
					// 	PAY_AMOUNT: 593,
					// 	ORIGINAL_AMOUT: 1843,
					// 	GOODS_INFO: '/',
					// 	CLIENT_CODE: "20844",
					// 	COM_GOODS_ID: "146764",
					// 	HX_AMOUNT:12,
					// 	QTY:1,
					// 	SALE_ORG:'313',
					// 	CUSTOMER_TRX_ID:"3165151"
					// },
				],
				dtReport1: [
					// {
					// 	HNYY_SALE_GATHERING_BILL_ID: "231641868151",
					// 	HNYY_SALE_GATHERING_BILL_NO: "186781581581519999999",
					// 	CLIENT_CODE: "7154",
					// 	CLIENT_NAME: "宁乡市沙田卫生院",
					// 	IMP_DATE: "2021-01-07T00:00:00",
					// 	CAN_HX_AMOUNT: 56,
					// 	AMOUNT: 891,
					// 	EXEC_HX_AMOUNT: 754,
					// 	BANK_ACCOUNT: "1864871585161951",
					// 	CREATER: "张三",
					// 	CREATE_DATE: "2021-01-07T00:00:00"
					// },
					// {
					// 	HNYY_SALE_GATHERING_BILL_ID: "2316418681512",
					// 	HNYY_SALE_GATHERING_BILL_NO: "18678158158152",
					// 	CLIENT_CODE: "71542",
					// 	CLIENT_NAME: "宁乡市沙田卫生院1",
					// 	IMP_DATE: "2021-01-07T00:00:00",
					// 	CAN_HX_AMOUNT: 562,
					// 	AMOUNT: 8912,
					// 	EXEC_HX_AMOUNT: 7542,
					// 	BANK_ACCOUNT: "18648715851619512",
					// 	CREATER: "张三1",
					// 	CREATE_DATE: "2021-01-07T00:00:00"
					// }
				],
				gridview1: [],
				gridview2: []
			}
		},
		computed: {
			remainAmount() {
				return Number(this.subAmount - this.writeAmount).toFixed(2)
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
		onLoad() {
			this.status_height = store.state.status_height
			// 请求销售部门和编码
			this.fetchSaleDepartment()
		},
		methods: {
			handleShowModal() {
				this.showModal = true
			},
			handleChangeItemPrice(e, val, index) {
				if (isNaN(e) && typeof e !== 'number') {
					uni.showToast({
						title: "请输入正确的金额",
						icon: "error"
					})
					this.$nextTick(() => {
						this.dtReport[index].HX_AMOUNT = Number(0)
					})
					this.$forceUpdate()
				}
				if (this.checkbox1.length) {
					let price = 0
					this.checkbox1.forEach(index => {
						const row = this.dtReport[index]
						price += Number(row.HX_AMOUNT)
					})
					this.writeAmount = Number(price).toFixed(2)
				}
			},
			handleChangeCheck(c) {
				this.isChecked = c
			},
			handleChangeCheckbox(e) {
				if (e.length) {
					let checkArr = []
					// 自动勾选单号相同的或者删除相同的
					e.forEach(index => {
						const row = this.dtReport[index]
						this.dtReport.forEach((d, i) => {
							if (row.ERP_INVOICE_NO == d.ERP_INVOICE_NO) {
								if (this.isChecked) {
									console.log('添加', i);
									checkArr.push(i)
								} else {
									console.log('删除', i);
									checkArr.splice(i, 1)
								}
							}
						})
					})
					let newArr = e.concat(checkArr)
					this.$nextTick(() => {
						this.checkbox1 = [...new Set(newArr)]
						if (this.checkbox1.length) {
							let arr = []
							let price = 0
							this.checkbox1.forEach(index => {
								const row = this.dtReport[index]
								price += Number(row.HX_AMOUNT)
								arr.push(row)
							})
							this.writeAmount = Number(price).toFixed(2)
							this.gridview2 = arr
						} else {
							this.writeAmount = 0.00
							this.gridview2 = []
						}
					})
					this.$forceUpdate()
				}

			},
			handleChangePage(e) {
				const {
					current
				} = e
				this.page.current = current
				this.handleDownload()
			},
			handleChangeRadio(e) {
				this.radiovalue1 = e
				const row = this.dtReport1.find(item => item.HNYY_SALE_GATHERING_BILL_ID == e)
				this.subAmount = Number(row.CAN_HX_AMOUNT).toFixed(2)
				this.gridview1 = [row]
			},
			// handleChangePrice(price1, price2) {
			// 	this.remainAmount = Number(price1 - price2).toFixed(2)
			// },
			async handleHx() {
				this.showModal = false
				// 验证
				if (!this.gridview1.length) {
					return uni.showToast({
						title: "请勾选回款",
						icon: "error"
					})
				}
				if (!this.gridview2.length) {
					return uni.showToast({
						title: "请勾选发票",
						icon: "error"
					})
				}
				const row = this.gridview1[0]
				// 拼接价格
				let price = new Big(0)
				this.gridview2.forEach(item => {
					const amount = new Big(item.HX_AMOUNT);
					price = price.plus(amount);
				})
				// 拼接gridview1
				let strArr = []
				this.gridview2.forEach(item => {
					let time = dayjs(item.INVOICE_DATE).format("YYYY-MM-DD")
					let str =
						`${item.EBS_INVOICE_NO}#${item.ERP_INVOICE_NO}#${item.ORDER_NO}#${time}#${item.ORIGINAL_AMOUT}#${item.QTY}#${item.SALE_ORG}#${item.COM_GOODS_ID}#${item.CUSTOMER_TRX_ID}#${item.HX_AMOUNT}`
					strArr.push(str)
				})
				const gridViewStr = strArr.join('$')
				console.log(gridViewStr, '这是gridview拼接值');
				// 整合数据
				const userInfo = uni.getStorageSync('userinfo')
				const newPrice = parseFloat(price.toString())
				if (newPrice > Number(this.subAmount)) {
					return uni.showToast({
						title: "核销金额大于认款金额，请确认!",
						icon: "error"
					})
				}
				// 控制输入的核销金额小于或者等于原始发票金额-已勾兑金额
				// 判断原始发票金额是否是正数如果是只能输入正数
				this.gridview2.forEach((item, index) => {
					if (Number(item.HX_AMOUNT) > (Number(item.ORIGINAL_AMOUT) - Number(item
							.EXEC_HX_AMOUNT))) {
						return uni.showToast({
							title: `第${index+1}个勾选的核销金额是否正确`,
							icon: "error"
						})
					}
					// 如果原始发票金额是正数核销金额就不能为负数
					if (Number(item.ORIGINAL_AMOUT) > 0 && Number(item.HX_AMOUNT) < 0) {
						return uni.showToast({
							title: `第${index+1}个勾选的核销金额不能为负数`,
							icon: "error"
						})
					}
					if (Number(item.ORIGINAL_AMOUT) < 0 && Number(item.HX_AMOUNT) > 0) {
						return uni.showToast({
							title: `第${index+1}个勾选的核销金额不能为正数`,
							icon: "error"
						})
					}
				})
				const model = {
					tax_amount: row.AMOUNT || "",
					free_amount: Number(price).toFixed(2) || "",
					client_id: this.model1.userInfo.ClientId || '',
					memo: this.memo || '',
					sale_orgvalue: this.model1.userInfo.SHORT_CODE || '',
					sale_orgtext: this.model1.userInfo.SaleOrg_name || '',
					bill_id: row.HNYY_SALE_GATHERING_BILL_ID || '',
					gridview1: gridViewStr || '',
					goodsCode: this.model1.userInfo.goodsCode || '',
					purNo: this.model1.userInfo.purNo || '',
					px: this.model1.userInfo.px || 'false',
					end_date: this.model1.userInfo.EndDate || dayjs().format("YYYY-MM-DD"),
					start_date: this.model1.userInfo.StartDate || "",
					counter: this.gridview1.length || 0,
					counter1: this.gridview2.length || 0,
					user_id: userInfo.USER_ID || '',
					pagesize: this.page.size,
					pageindex: this.page.current
				}
				console.log(model);
				this.saveloading = true
				uni.showLoading({
					title: "保存中",
					mask: true
				})
				try {
					const res = await writeOff(model)
					const {
						Data
					} = res
					if (res.State == 1) {
						this.memo = ''
						uni.showToast({
							title: "保存成功",
							time: 2000,
							mask: true
						})
						setTimeout(() => {
							const {
								report,
								report1,
								total
							} = Data
							this.dtReport1 = report1
							this.dtReport = report
							this.show = false
							this.page.total = total || 0
							this.checkbox1 = []
							this.writeAmount = Number(0).toFixed(2)
							this.subAmount = Number(0).toFixed(2)
						}, 2000)
					} else {
						uni.showToast({
							title: res.Msg,
							icon: 'error'
						})
					}
				} catch (e) {
					//TODO handle the exception
				} finally {
					setTimeout(() => {
						this.saveloading = false
						uni.hideLoading()
					}, 2000)
				}
			},
			handleConfirmDepartment(val) {
				const row = val.value[0]
				this.model1.userInfo.SaleOrg_name = row.SALE_ORG_NAME
				this.model1.userInfo.SaleOrg = row.SALE_ORG
				this.model1.userInfo.SHORT_CODE = row.POSTCODE
				this.handleCancelDepartment()
			},
			// 搜索订单
			async handleDownload() {
				this.loading = true
				uni.showLoading({
					title: "下载中",
					mask: true
				})
				try {
					if (!_.trim(this.model1.userInfo.ClientId)) {
						return uni.showToast({
							title: "请选择客户",
							icon: "error"
						})
					}
					if (!_.trim(this.model1.userInfo.SaleOrg)) {
						return uni.showToast({
							title: "请选择部门",
							icon: "error"
						})
					}
					if (!_.trim(this.model1.userInfo.EndDate)) {
						return uni.showToast({
							title: "请选择结束日期",
							icon: "error"
						})
					}

					const userInfo = uni.getStorageSync('userinfo')
					const model = {
						SaleOrg: this.model1.userInfo.SHORT_CODE || '',
						ClientId: this.model1.userInfo.ClientId || '',
						ClientCode: this.model1.userInfo.ClientCode || '',
						StartDate: this.model1.userInfo.StartDate || '',
						EndDate: this.model1.userInfo.EndDate || "",
						goodsCode: this.model1.userInfo.goodsCode || '',
						purNo: this.model1.userInfo.purNo || '',
						px: this.model1.userInfo.px || 'false',
						userid: userInfo.USER_ID,
						pagesize: this.page.size,
						pageindex: this.page.current
					}
					// 搜索参数写死方便调试
					// const model = {
					// 	SaleOrg: "33012",
					// 	ClientId: "20466",
					// 	ClientCode: "X01010777",
					// 	StartDate: "2021-01-01",
					// 	EndDate: "2021-01-31",
					// 	goodsCode: "",
					// 	purNo: "",
					// 	px: "false",
					// 	userid: "34",
					// 	pagesize: this.page.size,
					// 	pageindex: this.page.current,
					// }
					console.log(model);
					const res = await downloadHx(model)

					if (!res.Data) {
						uni.showToast({
							title: res.Msg,
							icon: "error"
						})
					} else {
						const {
							Data
						} = res
						const {
							report,
							report1,
							total
						} = Data
						this.dtReport1 = report1
						this.dtReport = report
						this.show = false
						this.page.total = total || 0
					}
				} catch (e) {
					//TODO handle the exception
				} finally {
					this.loading = false
					uni.hideLoading()
				}
			},
			handleConfirmPx(val) {
				const row = val.value[0]
				this.model1.userInfo.px_name = row.label
				this.model1.userInfo.px = row.value
				this.showPaixu = false
			},
			handleCancelDates() {
				this.showStartDate = false
			},
			handleConfirms(e) {
				this.showStartDate = false
				this.model1.userInfo.StartDate = dayjs(e.value).format('YYYY-MM-DD')
			},
			handleConfirm(e) {
				this.showDate = false
				this.model1.userInfo.EndDate = dayjs(e.value).format('YYYY-MM-DD')
			},
			handleReset() {
				this.model1.userInfo = {}
			},
			handleClickKh(row) {
				this.showKh = false
				this.model1.userInfo.ClientCode = row.PARTY_OPCODE
				this.model1.userInfo.ClientId = row.COM_PARTY_ID
				this.model1.userInfo.ClientName = row.PARTY_NAME
			},
			// 搜索客户
			async handleSearchKh(val) {
				if (!_.trim(val)) {
					return uni.showToast({
						title: "请输入搜索关键词"
					})
				}
				uni.showLoading({
					title: "搜索中",
					mask: true
				})
				try {
					const userinfo = uni.getStorageSync('userinfo')
					const res = await searchKh(val, userinfo.USER_ID)
					if (res.State == 1) {
						this.khList = res.Data
					} else {
						uni.showToast({
							title: res.Msg,
							icon: "error"
						})
					}
				} catch (e) {
					//TODO handle the exception
				} finally {
					uni.hideLoading()
				}
			},
			handleCloseKh() {
				this.showKh = false
			},
			handleCancelPx() {
				this.showPaixu = false
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				const row = this.saleList[columnIndex][index]
				this.model1.userInfo.SaleOrg_name = row.SALE_ORG_NAME
				this.model1.userInfo.SaleOrg = row.SALE_ORG
				this.model1.userInfo.SHORT_CODE = row.POSTCODE
			},
			handleChangePx(e) {
				const {
					columnIndex,
					index
				} = e
				const row = this.paixuList[columnIndex][index]
				this.model1.userInfo.px_name = row.label
				this.model1.userInfo.px = row.value
			},
			async fetchSaleDepartment() {
				const userinfo = uni.getStorageSync('userinfo')
				const res = await getSaleDepartment(userinfo.COM_PARTY_ID)
				if (res.State == 1) {
					const {
						Data
					} = res
					this.saleList[0] = Data
				}
			},
			handleCancelDepartment() {
				this.showDepartment = false
			},
			handleCancelDate() {
				this.showDate = false
			},
			handleClose() {
				this.show = false
			},
			handleOpen() {

			},
			handleRightClick() {
				this.show = true
			},
			handleChange(index) {
				this.current = index
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		background-color: $u-bg-color;
	}

	/* #endif */

	.u-page {
		padding: 0;
		flex: 1;
		background-color: $u-bg-color;
		position: relative;

		&__item {

			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: $u-border-color;
		padding: 3px 7px;
		opacity: 0.8;
	}

	.writeOff-page {
		// padding: calc(var(--status-bar-height) + 88rpx + 44rpx + 32rpx) 32rpx 32rpx 32rpx;
		padding-bottom: 200rpx;
	}

	.hexiao {
		// margin-top: 32rpx;
		margin-top: 390rpx;
		padding: 24px;
	}

	.dingdan {
		padding: 24px;
		margin-top: 390rpx;
	}

	.panel {
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, .1);
		background-color: #fff;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	/deep/.u-radio-group--row {
		flex-direction: column !important;
	}

	/deep/.u-checkbox-group--row {
		flex-direction: column !important;
	}

	/deep/.u-radio {
		display: inline-block !important;
		line-height: 84rpx;
	}

	.hexiao-btn {
		position: fixed;
		bottom: 100rpx;
		width: calc(100% - 64rpx);
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
	}

	.panels {
		// padding-bottom: 200rpx;

	}

	.popup-card {
		padding: 50rpx 32rpx;
		width: calc(100vw - 64rpx);
		height: calc(100vh - 100rpx);
		overflow-y: scroll;
	}

	.kh-card {
		padding: 20rpx 32rpx;
		width: calc(100vw - 64rpx);
		height: calc(100vh - 100rpx);
		overflow-y: scroll;

		.search {
			margin-top: 80rpx;
			margin-bottom: 50rpx;
		}

		.cards {
			.card {
				box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, .1);
				padding: 24rpx;
				border-radius: 8rpx;
				margin-bottom: 32rpx;

				div {
					font-size: 28rpx;
					line-height: 48rpx;
					color: #333333;
				}
			}
		}
	}

	.btn-group {
		margin-top: 40rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 24rpx;
	}

	.fixed-search {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		right: 8rpx;
		top: 50%;
		background-color: $u-primary;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
	}

	/deep/.u-form-item__body__left {
		width: 200rpx !important;
	}

	/deep/.u-form-item__body__left__content__label {
		font-size: 28rpx !important;
	}

	.panel {
		.content {
			display: grid;
			width: 100%;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 12rpx;

			.col {
				width: 100%;
				margin-bottom: 10rpx;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;

				span {
					&:nth-child(2) {
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}
			}
		}
	}

	.u-input__content__field-wrapper input {
		font-size: 24rpx !important;
	}

	.col .u-input {
		padding: 0 !important;
		width: 160rpx !important;
	}

	.tool-page {
		padding: 0 36rpx;
		.remark {
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			span {
				font-size: 28rpx;
			}

			/deep/.u-input {
				display: inline !important;
				background-color: #fff !important;
				max-width: 600rpx !important;
				padding: 6rpx 9rpx !important;
			}
		}

		.page {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			span {
				font-size: 28rpx;
			}

			/deep/.u-input {
				display: inline !important;
				background-color: #fff !important;
				max-width: 100rpx !important;
				padding: 6rpx 9rpx !important;
			}

			.search-btn {
				margin-left: 10rpx;
				font-size: 28rpx;
				background-color: $u-primary;
				padding: 12rpx 18rpx !important;
				color: #fff;
				border-radius: 8rpx;
				cursor: pointer;
			}
		}

		.remark {}
	}

	.search-price {
		position: fixed;
		width: 100%;
		padding-top: 30rpx;
		background-color: #fff;
		z-index: 50;
		top: 62rpx;
		ul {
			padding: 0 32rpx;
			li {
				display: flex;
				align-items: center;
				margin: 20rpx 0;

				span {
					font-size: 24rpx;
					margin-right: 20rpx;
				}

				/deep/.u-input {
					background-color: #eeeeef !important;
				}

			}
		}
	}

	.fixed-search {
		/deep/.u-icon__icon {
			font-size: 56rpx !important;
		}
	}
	.stk{
		position: fixed;
		top: 0;
		z-index: 90;
		width: calc(100vw - 64rpx);
		padding: 0 32rpx;
		padding-top: 32rpx;
		background-color: #fff;
	}
</style>
